<template>
	<div>
		<div class="cartimg" v-if="shopcart.length==0">
			<img src="../assets/购物车空.png"/>
			<p>购物车是空的哦，快去添加商品吧~</p>
		</div>
		
		<div class="cart_box" v-else>
			<div class="header_box">
				<div :class="chebool?'active':'noactive'" @click="changeche()"></div>
				<div class="bianji_box">全选</div>
			</div>
			<div class="shop_box" v-for="(item,index) in shopcart">
				<div :class="item.isbool?'active':'noactive'" @click="changeisbool(item)"></div>
				<div><img :src="item.imgs[item.typenum]"/></div>
				<div class="shopinfo_box">
					<div class="shopname_box">{{item.shopname}}</div>
					<div class="shoptype_box">{{item.type[item.typenum]}}&nbsp;{{item.specification[item.specificationnum]}}</div>
					<div class="shopprice_box">￥{{item.price*item.nums}}</div>
				</div>
				<div class="nums_box">
					<div @click="changenumsf(item.id)">-</div>
					<div>{{item.nums}}</div>
					<div @click="changenumsz(item.id)">+</div>
				</div>
			</div>
			<div class="kong"></div>
			
			<div class="footer_box">
				<div class="shopcartimgs"><img class="imgs_shopcart" src="../assets/购物车空1.png"/>总计：{{totalsAll}}</div>
				<div class="gotoshop">去买单</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
	  name: 'cartpage',
	  data(){
		  return{
			  chebool:false
		  }
	  },
	  computed:{
	  	//调用vuex从后台获取的数据
	  	...mapState({
	  		shopcart:state=>state.shopcart.shopcart,
	  	}),
		totalsAll(){
				  let total=0;
				  this.shopcart.reduce((pre,cur)=>{
					  if(cur.isbool){
						  return total=pre+cur.nums*cur.price
					  }else{
						  return pre
					  }
				  },0)
				  return total
		}
	  },
	  methods:{
		  changenumsf(id){
			  this.shopcart.forEach(item=>{
				  if(item.id==id&&item.nums>1){
					  item.nums--
				  }
			  })
		  },
		  changenumsz(id){
			  this.shopcart.forEach(item=>{
				  if(item.id==id){
					  item.nums++
				  }
			  })
		  },
		  changeche(){
			  this.chebool=!this.chebool
			  this.shopcart.forEach(item=>{
				  item.isbool=this.chebool;
			  })
		  },
		  changeisbool(item){
			  item.isbool=!item.isbool;
			  let count=0;
			  this.shopcart.forEach(item=>{
				  if(item.isbool==true){
					  count++;
				  }
			  })
			  if(count==this.shopcart.length){
			  		this.chebool=true
			  }else{
			  		this.chebool=false
			  }
		  },

	  },
	  created() {
	  }
	}
</script>

<style scoped>
	.kong{
		height: 6.9rem;
	}
.cartimg{
	margin: auto;
	margin-top: 3.125rem;
}
.cartimg img{
	width: 12.5rem;
	height: 12.5rem;
}
.bianji_box{
	margin-top: 1.7rem;
}
p{
	color: darkgray;
}
.header_box{
	margin-bottom: 0.3rem;
	margin-left: 0.2rem;
	display: flex;
	flex-direction: row;
}
img{
	width: 5rem;
	height: 5rem;
}
.shop_box{
	margin: auto;
	display: flex;
	flex-direction: row;
	height: 5rem;
	width: 22rem;
	border: 0.0625rem solid gainsboro;
}
.nums_box{
	display: flex;
	flex-direction: row;
	margin-top: 3rem;
	margin-left: 1rem;
}
.nums_box div{
	width: 0.9375rem;
	height: 0.9375rem;
	border: 0.0625rem solid black;
	margin-left: 0.0625rem;
}
.noactive{
	width: 1rem;
	height: 1rem;
	border: 0.0625rem solid black;
	background-color: white;
	border-radius: 50%;
	margin-top: 1.9rem;
	margin-left: 0.3rem;
}
.active{
	width: 1rem;
	height: 1rem;
	border: 0.0625rem solid black;
	background-color: red;
	border-radius: 50%;
	margin-top: 1.9rem;
	margin-left: 0.3rem;
}
.shopinfo_box{
	margin-left: 1.25rem;
	display: flex;
	flex-direction: column;
}
.shopinfo_box div{
	flex: 1;
}
.shoptype_box{
	font-size: 0.75rem;
}
.shopprice_box{
	color: coral;
}
.footer_box{
	display: flex;
	flex-direction: row;
	width: 105%;
	height: 3.5rem;
	margin: auto;
	line-height: 3.5rem;
	position: fixed;
	bottom: 3.4rem;
	left: -0.5rem;
	background-color: aliceblue;
	border-top: 0.0625rem solid gainsboro;
}
.imgs_shopcart{
	width: 3.125rem;
	height: 3.125rem;
}
.shopcartimgs{
	margin-left: 1rem;
	flex: 1;
	text-align: left;
}
.gotoshop{
	width: 5rem;
	background-color: crimson;
}
</style>